<template>
  <div>
    <div id="boxFixed" :class="{ is_fixed: isFixed }">
      <ul class="secondary-navigation animate-style" ref="secondary">
        <li
          class="nav-bgc ani-style"
          :style="{ transform: `translateX(${pix(173 * currt)})` }"
        ></li>
        <li
          class="nav-items"
          v-for="(item, index) in productList"
          :class="{ 'nav-active': currt === index }"
          :key="index"
          @click="selectNav(index, item.id)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="gap" v-if="isFixed">间隔槽</div>
  </div>
</template>

<script>
import pixel from '../utils/pixel'
export default {
  name: 'Navigation',
  props: {
    productList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      // productList: [
      //   '营养奶粉',
      //   '宝宝尿裤',
      //   '辅食保健',
      //   '洗护哺喂',
      //   '洗护哺喂',
      // ],
      currt: 0,
      isFixed: false,
      offsetTop: 0,
    }
  },
  computed: {
    pix() {
      return (pixx) => {
        return pixel(pixx)
      }
    },
  },
  // mounted() {
  //   this.$emit('clickSwitch', this.productList[0].id)
  // },

  mounted() {
    window.addEventListener('scroll', this.initHeight)
    this.$nextTick(() => {
      this.offsetTop = document.querySelector('#boxFixed').offsetTop
    })
  },
  methods: {
    initHeight() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      this.isFixed = scrollTop > this.offsetTop
    },
    selectNav(index, id) {
      // console.log(id)
      this.currt = index
      this.$emit('clickSwitch', id, index)
      const _this = this
      let totalLeft = this.$refs.secondary.scrollLeft
      const clientWidth = Math.min(
        document.documentElement.getBoundingClientRect().width,
        500
      )
      // console.log(clientWidth)
      let totalRight =
        this.$refs.secondary.scrollWidth -
        clientWidth -
        this.$refs.secondary.scrollLeft
      if (index <= 1) {
        const step = totalLeft / 50
        smoothJump(step, false)
      } else if (this.productList.length - 2 <= index) {
        const step = totalRight / 50
        smoothJump(step, true)
      }
      function smoothJump(step, direction) {
        if (direction && totalRight > 1) {
          totalRight -= step
          _this.$refs.secondary.scrollLeft =
            _this.$refs.secondary.scrollWidth - clientWidth - totalRight
          setTimeout(() => {
            smoothJump(step, direction)
          }, 1)
        } else if (!direction && totalLeft > 0) {
          totalLeft -= step
          _this.$refs.secondary.scrollLeft = totalLeft
          setTimeout(() => {
            smoothJump(step, direction)
          }, 1)
        }
      }
    },
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
}
</script>

<style lang="scss" scoped>
@import '../assets/sass/mixin.scss';
@import '../assets/sass/reset.scss';
@import '../assets/sass/_variable.scss';
.gap {
  height: rem(129);
}
.secondary-navigation {
  list-style-type: none;
  // margin: rem(32) 0 rem(24);
  // padding: 0 rem(24);
  padding: rem(32) rem(24) rem(24);
  height: rem(129);
  background: #da193e;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow-y: hidden;
  position: relative;
  overflow-x: scroll;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
  // .secondary-navigation::-webkit-scrollbar {
  //   display: none;
  // }
  .nav-items {
    // display: flex;
    width: rem(164);
    height: 100%;
    border-radius: rem(36.5);
    font-size: rem(30);
    text-align: center;
    line-height: rem(70);
    color: #ffd6d8;
    font-family: PingFangSC-Regular;
    letter-spacing: 0;
    flex: 1 0 auto;
    margin-right: rem(9);
    z-index: 99;
    transition: all 0.4s ease-out;
  }
  .nav-items:last-child {
    margin-right: 0;
  }
  .nav-active {
    font-family: PingFangSC-Semibold;
    color: #ffffff;
  }
  .nav-bgc {
    position: absolute;
    height: rem(73);
    width: rem(164);
    border-radius: rem(36.5);
    z-index: 1;
    background: linear-gradient(180deg, #ffae8b 0%, #fa1f42 100%);
  }
  .ani-style {
    transition: all 0.4s ease-out;
  }
}
.is_fixed {
  position: fixed;
  top: 0;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
  z-index: 999;
}
.animate-style {
  transition: all 0.8s ease-out;
}
</style>
